<template>
  <div class="contact-page">
    <div class="page-header">
      <div class="container">
        <h1>联系我们</h1>
        <p>欢迎与我们取得联系</p>
      </div>
    </div>

    <div class="container" style="margin-top: 80px; padding-bottom: 80px">
      <el-row :gutter="40">
        <el-col :span="12">
          <h2>联系方式</h2>
          <div class="contact-info">
            <div class="info-item">
              <h3>电话</h3>
              <p>18236122582 17516761950</p>
            </div>
            <div class="info-item">
              <h3>邮箱</h3>
              <p>winstech2024@163.com</p>
            </div>
            <div class="info-item">
              <h3>地址</h3>
              <p>河南省长垣市山海大道国贸中心A座2207-2209</p>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <h2>在线留言</h2>
          <el-form :model="form" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" />
            </el-form-item>
            <el-form-item label="留言">
              <el-input v-model="form.content" type="textarea" :rows="4" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'

const form = reactive({
  name: '',
  phone: '',
  email: '',
  content: ''
})

const submitForm = () => {
  if (!form.name || !form.content) {
    ElMessage.warning('请填写姓名和留言内容')
    return
  }
  
  // 这里应该调用API提交表单
  ElMessage.success('留言提交成功，我们会尽快与您联系！')
  
  // 清空表单
  Object.assign(form, {
    name: '',
    phone: '',
    email: '',
    content: ''
  })
}
</script>

<style scoped lang="scss">
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 100px 0 60px;
  margin-top: 70px;
  text-align: center;

  h1 {
    font-size: 42px;
    margin-bottom: 16px;
  }

  p {
    font-size: 18px;
    opacity: 0.9;
  }
}

h2 {
  font-size: 28px;
  margin-bottom: 32px;
}

.contact-info {
  .info-item {
    margin-bottom: 32px;

    h3 {
      font-size: 18px;
      color: var(--primary-color);
      margin-bottom: 8px;
    }

    p {
      font-size: 16px;
      color: var(--text-secondary);
    }
  }
}
</style>

